<template>
	<view>
		<!-- http://localhost:8080/#/pages/detail/detail -->
		<view>轮播图区域</view>
		<view class="pl-20 pt-34 pb-24 fs-38 cfs-030000 fw-500">小米MIX3 6GB+128GB</view>
		<view class="pl-20 pr-18 pb-50 lh-15 fs-26 cfs-7b7f83">磁动力滑盖全面屏/前后旗舰Al双摄/四曲面彩色陶瓷机身/高效10W无线充电</view>
		<view class="pl-20 pb-40 cfs-fd6801 fs-34 fw-500">¥3299</view>
		<view class="ml-18 mr-18 border radius-12" style="overflow: hidden;">
			<view class="cbg-f5f5f5 flex f-row-nowrap f-ai-center cfs-7b7f83 border-bottom" style="height: 90rpx;"
				@click="open('configuration')">
				<text class="mr-20 ml-32">已选</text>
				<view class="flex-1"><text class="mr-12">火红焰</text><text class="mr-12">64G</text><text>标配</text></view>
				<text class="mr-32 iconfont icon-arrow"></text>
			</view>
			<view class="cbg-f5f5f5 flex f-row-nowrap f-ai-center cfs-7b7f83 border-bottom" style="height: 90rpx;">
				<text class="mr-20 ml-32">配送</text>
				<view class="flex-1"><text class="mr-12">北京</text><text class="mr-12">东城区</text><text
						class="cfs-fd6801">有现货</text></view>
				<text class="mr-32 iconfont icon-arrow"></text>
			</view>
			<view class="cbg-f5f5f5 flex f-row-nowrap f-ai-center cfs-7b7f83" style="height: 90rpx;" @click="open('special')">
				<view class="flex-1 ml-28">
					<radio color="#fd6801" checked style="transform:scale(0.7)" /><text class="mr-10">小米自营</text>
					<radio color="#fd6801" checked style="transform:scale(0.7)" /><text class="mr-10">小米发货</text>
					<radio color="#fd6801" checked style="transform:scale(0.7)" /><text>七天无理由退货</text>
				</view>
				<text class="mr-32 iconfont icon-arrow"></text>
			</view>
		</view>
		<view class="pl-20 pt-74 pb-34 fs-40 fw-500 cfs-0300000">为你推荐</view>
		<view class="grid pl-4 pr-4 pb-100"
			style="grid-template:546rpx / repeat(2,1fr);grid-auto-rows: 546rpx;gap:0 12rpx;">
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
			<view>
				<image src="../../static/images/demo/list/1.jpg" style="height: 366rpx;" />
				<view class="pl-26 pt-28 fs-26 cfs-030000 fw-500">米家空调</view>
				<view class="pl-26 pt-24 fs-24 cfs-717171">1.5匹支流变频</view>
				<view class="pl-26 pt-28 h-28"><text class="fs-28 mr-12" style="color:#b04b52">¥2199</text><text
						class="fs-18 cfs-717171 pt-4">2699</text></view>
			</view>
		</view>
		<view class="h-100 grid cbg-fff"
			style="position: fixed;bottom: 0;left: 0;right: 0;grid-template: repeat(2,50rpx) / 210rpx 125rpx 1fr;">
			<text class="iconfont icon-favorite ml-70 mt-20"></text>
			<text class="iconfont icon-cart-empty ml-24 mt-20"></text>
			<view class="cbg-fd6801 flex f-row-nowrap f-ai-center f-jc-center f-30 cfs-fff"
				style="grid-row: 1 /-1;grid-column: 3 / -1;">加入购物车</view>
			<view class="ml-60 mt-10">收藏</view>
			<view class="mt-10">购物车</view>

		</view>
		<configurationPopUpComp ref="configurationCompRef" />
		<specialPopUpComp title="服务说明" ref="specialPopUpCompRef" />

	</view>
</template>

<script>
import configurationPopUpComp from './configurationPopUpComp.vue'
import specialPopUpComp from './specialPopUpComp.vue'
export default {
	components: { configurationPopUpComp, specialPopUpComp },
	data() {
		return {

		}
	},
	methods: {
		open(type) {
			const ref =type === 'configuration' ? 'configurationCompRef' :type === 'special' ? 'specialPopUpCompRef' :	''
			this.$refs[ref].open()
		}

	}
}
</script>
